<template>
  <div class="home-container">
    <div class="nav-bar">
      <ul class="nav-items">
        <li>
          <router-link :to="`/home/todos?username=${username}`">清单</router-link>
        </li>
        <li>
          <router-link to="/home/time">倒计时</router-link>
        </li>
        <li>
          <router-link to="/home/test">测试图</router-link>
        </li>
        <li>
          <a href="https://gitee.com/emotional-transformation/todo-list-login.git">Git仓库</a>
        </li>
        <li>
          <router-link replaces to="/login">退出</router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import Todos from "../pages/Todos.vue";
import Time from "../pages/Time.vue";
export default {
  name: "Home",
  components: {
    Todos,
    Time,
  },
  data() {
    return {
      username: this.$route.query.username,
    };
  },
};
</script>

<style>
.home-container {
  display: flex;
  flex-direction: column;
  align-items: center; 
  padding: 20px; 
}

.nav-bar {
  display: flex;
  justify-content: center; 
  background-color: rgb(214, 223, 225);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1); 
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}


.nav-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav-items li {
  margin: 0 10px; 
}

.nav-items a,
.nav-items router-link {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  line-height: 40px; 
  transition: all 0.2s ease-in-out; 
}

.nav-items a:hover,
.nav-items router-link:hover {
  color: #007bff; 
}


@media (max-width: 768px) {
  .home-container {
    padding: 10px; 
  }

  .nav-bar {
    flex-wrap: wrap;
    border-bottom: none; 
    box-shadow: none; 
  }

  .nav-items {
    margin-bottom: 10px; 
  }

  .nav-items li {
    margin: 0 9px; 
  }
}
</style>